<template>
	<div id="page">
		<img class="page-bg" src="../../assets/app-bg.jpg" >
		<van-nav-bar class="navTop" :title="$t('header.gd_order')" left-arrow="" @click-left="navLeft"  ></van-nav-bar>
		<div class="main" ref="MainScroll" @scroll="S_Load()" >
			<div class="tab-main">
				<img class="nodata" v-if="OrderData.length == 0" src="../../assets/nodata.png" >
				<div class="bor" v-else v-for="item in OrderData">
					<div class="date">{{$t('page.Documentary_date')}} :{{item.date}}    <label class="fr">{{item.multiple}}X</label></div>
					<div class="hua">{{$t('page.Order_revenue')}}：{{item.income}}</div>
					<div class="guo">
						<div class="Tic">{{item.exchange_a}}<label class="price">{{item.price_a}}</label></div>
						<div class="line"></div>
						<div class="Tic">{{item.exchange_b}}<label class="price">{{item.price_b}}</label></div>
					</div>
					<div class="kuai">
						<div class="bok">{{item.gd_amount}}<p>{{$t('page.User_documentary_amount')}} </p></div>
						<div class="bok">
						{{item.customer_income > 0 ? '+':''}}
						{{item.customer_income}}USDT<p>{{$t('page.User_documentary_revenue')}}</p></div>
					</div>
				</div>
			</div>
			<div ref="end" class="Loading">{{Loading}}</div>

		</div>
		<!-- 跟单 -->

	</div>
</template>

<script>
	import { mapState } from "vuex";
	import { Toast } from 'vant';
	import store from '@/store'

	export default {
		name:"gd_order",
		data() {
			return {
				userData:[],
				OrderData: [],
				page:0,
				Loading:'',
        isAuto:0,

			}
		},
		mounted() {
      this.isAuto = this.$route.query.isAuto;
			this.userData = this.$store.state.user;
			console.log(this.userData)
			this.Orders_all()

		},
		computed: {
			...mapState({
				user: state => state.user,
			})
		},
		watch: {
			'user': function(e) {
				this.userData = e;
				this.Orders_all();
				this.$forceUpdate();
			}
		},
		methods: {
			navLeft(){
				this.$router.go(-1);//返回上一层
			},
			async Orders_all(){
				if(!this.$dapp.getAddress()){
					return
				};

				var page = this.page + 1;
				const { err, res } = await this.$request.get("/chss/userTrasaction/joined_orders_all", {
					address:this.$dapp.getAddress(),
          isAuto:this.isAuto,
					page : page
				});
				if (err === null) {
					var OrderData = this.OrderData;
					console.log(res)
					setTimeout (() => {
						this.OrderData = OrderData.concat(res);
						this.Loading = ''
						this.$forceUpdate();
						this.page = page;
					},300);
				}
			},

			S_Load(){//监听滚动
				var top = this.$refs.MainScroll.scrollTop;	//滚动
				var m_height =  this.$refs.MainScroll.offsetHeight;
				var end = this.$refs.end.offsetTop;

				if(top+m_height+50 > end && this.Loading == '' ){
					this.Loading = 'Loading...'
					this.Orders_all()
				}
			},




		}
	}
</script>

<style lang="scss" scoped>
	#page{
		position: relative;
		overflow: scroll;
	}

	.Loading{text-align: center;}
	.main{overflow: scroll;}


	.bor{
		border: 2px solid #fff; border-radius: 10px;
		padding:20px 30px; box-sizing: border-box;
		margin: 30px;
		position: relative;color: #eee;
		background: rgba(0 , 0 , 0, 0.3 );

		.hua{color: #ce9d11; margin-top: 10px; font-size: 26px; text-align: center; }

		.guo{
			display: flex;

			.Tic{text-align: center;
				.price{display: block;}
			}

			.line{
				flex: 1; margin: 0px 30px; position: relative;
				height: 25px; border-bottom: 2px dashed #409ab8;
				&::before{
					content: "";
					display: block; width: 10px; height: 10px;
					border: 1px solid #409ab8;
					border-bottom-color:transparent;
					border-left-color:transparent;

					transform:rotate(45deg);
					-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
					-ms-transform:rotate(45deg); 	/* IE 9 */
					-moz-transform:rotate(45deg); 	/* Firefox */
					-o-transform:rotate(45deg); 	/* Opera */

					position: absolute; right: 0px; top: 20px;
				}
			}

		}
		.time{
			text-align: center; font-size: 40px;
			margin: 30px; font-weight: 100;
			text{display: block; line-height: 50px; font-size: 25px; color:#394d7d}
		}
		.date{
			height: 50px;border-bottom: 2px solid #FFF;
			.fr{
				float: right;
			}
		}

		.kuai{
			display: flex; padding:30px 0px;
			.bok{flex: 1; text-align: center;
				font-size: 30px;
				p{display: block; color:#999; font-size: 26px; margin-top: 10px; }
			}
			& .bok:nth-child(2){border-left: 1px solid #2979FF;}
		}

		.bottom{
			height: 10px; text-align: center;
			.btn{
				display: inline-block;
				color: #333; line-height: 60px;
				width: 200px; text-align: center;
				border-radius: 50px;

				position: absolute;
				bottom: -30px;left: 50%; margin-left: -100px;
			}
		}
	}


	.tab-main{
		overflow: hidden;
	}
</style>
